<script setup>
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import { ref, onMounted, onBeforeMount } from 'vue';

const chartRef = ref(null);
const currentWordCloudData = ref([]);
const props = defineProps({
    getWordCloudData: Function,
});

const wordCloudInit = () => {
    const chart = echarts.init(chartRef.value);
    const option = {
        series: [
        {
          type: 'wordCloud',
          sizeRange: [8, 46],
          rotationRange: [0, 0],
          gridSize: 0,
                layoutAnimation: true,
                center: ['50%', '50%'], // 设置词云居中
                data: currentWordCloudData.value,
          
          emphasis: {
            textStyle: {
              fontWeight: 'bold',
              color: '#000'
            }
        },
        }
      ]
    }
    chart.setOption(option);
}

onMounted(async() => {
    currentWordCloudData.value = await props.getWordCloudData()
    wordCloudInit();
});
</script>

<template>
    <div ref="chartRef" class="word-cloud-container"></div>
</template>

<style scoped>
.word-cloud-container {
  width: 350px;
  height: 350px;
}

</style>
